<template>
	<view class="content">		
			<view class="bg-top">
				<img src="@/static/images/gz_banner.png" style="width: 100%;" alt="">
				<view class="bg-top_title">
					停电调度
				</view>
			</view>
			<img src="@/static/images/gz_topBg.png" class="pic_title_tousu1" alt="">
			<view class="pic_title">
				铁塔停电调度
			</view>
			<view  id="table1" >
				<view class="tableTh">
					<span class="tableData_topTitle">区域</span>
					<span class="tableData_topTitle">停电数</span>
					<span class="tableData_topTitle">发电数</span>
					<span class="tableData_topTitle">未恢<br/>复数</span>
					<span class="tableData_topTitle">电压小于<br/>50V数</span>
					<span class="tableData_topTitle">停电<br/>比例</span>
					<span class="tableData_topTitle">停电<br/>退服比</span>
				</view>
				<view class="tableTd" :style="{height: isHig4 && dedicatedLineDataList.length > 3 ?  '450rpx' : '' }" >
					<view v-if="dedicatedLineDataList.length>0" :class="getRowClass(index)" v-for="(item, index) in dedicatedLineDataList" :key="index">
						<span class="tableData_bomTitle">{{ item.HappenTime }}</span>
						<span class="tableData_bomTitle">{{ item.Province }}</span>
						<span class="tableData_bomTitle">{{ item.City }}</span>
						<span class="tableData_bomTitle">{{ item.CustomerName }}</span>
						<span class="tableData_bomTitle">{{ item.OverTime }}</span>
						<span class="tableData_bomTitle">{{ item.CustomerName }}</span>
						<span class="tableData_bomTitle">{{ item.OverTime }}</span>
					</view>	
					<view class="tableTdNull" v-if="dedicatedLineDataList.length == 0">
						无
					</view>
				</view>
				<view class="gengduo" @click="onGD4()" v-if="isHig4 && dedicatedLineDataList.length > 3">
					展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
				</view>
			</view>
		
			<view>
				<u-popup v-model="show" mode="center" border-radius="12"   closeable safe-area-inset-bottom close-icon-color="#fff">
					<view class="popupBox">
						<view class="titleView">top信息</view>
						<view class="boxNr">
							<view class="nrTitle">
								集中投诉 TOP3 
							</view>
							<view class="subTitleNr" >
								<view v-for="(item,index) in popupList" :key="index">
										<span style="color: #5F6475;font-weight: bold;margin-right: 10upx;">TOP{{index+1}}:</span> {{item.sub}}
								</view>
							</view>
							<view class="nrTitle">
								集中投诉 TOP3 
							</view>
							<view class="subTitleNr" >
								<view v-for="(item,index) in popupList" :key="index">
										<span style="color: #5F6475;font-weight: bold;margin-right: 10upx;">TOP{{index+1}}:</span> {{item.sub}}
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
	</view>
</template>

<script>
	import { baseUrl } from '@/common/request/config';
	import $ from 'common/utils/jquery-3.5.1.min.js'
	export default {
		watch : {
			// 监听路由变化
			'$route'(to, from) {
			  if (to.path === '/pagesJK/complaintPage/index') {
					this.initPage()
			  }    
			}
		},
		data() {
			return {
				show: false,
				isHig: false,
				isHig2: false,
				isHig3: false,
				isHig4: false,
				popupList: [
					{
						sub: '网络无法连接 43 件(占比 34.96%)'
					},
					{
						sub: 'LOS 红灯无法上网 41 件(占比 33.33%)'
					},
					{
						sub: '光猫掉电 10 件(占比 8.13%)。'
					},
				],
				curNow: 0,
				datalsTop: {},
				get5gDataList: [],
				getgovDataList: [],
				getiotDataList: [],
				dedicatedLineDataList: [],
			};
		},
		onLoad() {
		},
		activated() {
			
		},
		mounted(){
			this.initPage()
		},
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		methods: {
			initPage(){
				this.getDataTop()
				this.get5gList()
				this.getgovList()
				this.getiotList()
				this.getlineList()
			},
			async getDataTop() {
			    	let	data = await this.$api.getDataGKTS(); // 概览 - 投诉
			    	// console.log('投诉res',data)
			    	if (data.Code == 200) {
			    		this.datalsTop = data.Data.Tob
			    	} else {
			    		uni.showToast({
			    			title: data.Message,
			    			icon: 'none',
			    			duration: 5000,
			    			mask: true,
			    		});
			    	}		
			},
			//5g 
			async get5gList() {
			    	let	data = await this.$api.get5gListTS(); // 概览 - 投诉
			    	// console.log('投诉-5g',data)
			    	if (data.Code == 200) {
						this.isHig3 = data.Data.length > 3 ? true : false
			    		this.get5gDataList = data.Data
			    	} else {
			    		uni.showToast({
			    			title: data.Message,
			    			icon: 'none',
			    			duration: 5000,
			    			mask: true,
			    		});
			    	}		
			},
			//查询政企专线投诉明细
			async getgovList() {
			    	let	data = await this.$api.getgovListTS(); // 概览 - 投诉
			    	// console.log('投诉-5g',data)
			    	if (data.Code == 200) {
						this.isHig2 = data.Data.length > 3 ? true : false
			    		this.getgovDataList = data.Data
			    	} else {
			    		uni.showToast({
			    			title: data.Message,
			    			icon: 'none',
			    			duration: 5000,
			    			mask: true,
			    		});
			    	}		
			},
			//查询物联网投诉明细
			async getiotList() {
			    	let	data = await this.$api.getiotListTS(); // 概览 - 投诉
			    	// console.log('投诉-5g',data)
			    	if (data.Code == 200) {
						this.isHig = data.Data.length > 3 ? true : false
			    		this.getiotDataList = data.Data
			    	} else {
			    		uni.showToast({
			    			title: data.Message,
			    			icon: 'none',
			    			duration: 5000,
			    			mask: true,
			    		});
			    	}		
			},
			//中断投诉
			async getlineList() {
			    	let	data = await this.$api.getlineListTS(); // 概览 - 投诉
			    	// console.log('投诉-5g',data)
			    	if (data.Code == 200) {
						this.isHig4 = data.Data.length > 3 ? true : false
			    		this.dedicatedLineDataList = data.Data
			    	} else {
			    		uni.showToast({
			    			title: data.Message,
			    			icon: 'none',
			    			duration: 5000,
			    			mask: true,
			    		});
			    	}		
			},
			getRowClass(index) {
			    // 检查行号是否为奇数（长度为1、3、5等）
			    if (index % 2 !== 0) {
			      return 'odd-row tableTr';
			    }
			    return 'tableTr';
			},
			onGD(){
				  this.isHig = !this.isHig
			},
			onGD2(){
				  this.isHig2 = !this.isHig2
			},
			onGD3(){
				  this.isHig3 = !this.isHig3
			},
			onGD4(){
				  this.isHig4 = !this.isHig4
			},
			sectionChange(index) {
				this.curNow = index;
			}
		},
	}
</script>
<style lang="scss" scoped>

.content{
	position: relative;
	padding-bottom: 40upx;
}
.pic_title_tousu1{
	height: 110upx;
	position: absolute;
	top: 190upx;
	left: 20upx;
	
}
.pic_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		text-shadow: 0px 3rpx 6rpx rgba(0,0,0,0.16);
		text-align: center;
		font-style: normal;
		text-transform: none;
		position: absolute;
		top: 210upx;
		left: 110upx;
	}
.bg-top{
    width: 750rpx;
	position: relative;
	.bg-top_title{
		font-weight: 600;
		font-size: 56rpx;
		color: #FFFFFF;
		line-height: 0rpx;
		text-shadow: 0px 3px 6px rgba(0,0,0,0.16);
		position: absolute;
		top: 100rpx;
		left: 100rpx;
	}
}
.subsection{
	width: 672upx;
	height: 60upx;
	margin: 0 0 22upx 16upx;
}
#table1{
	width: 710upx;
	border-radius: 20upx 20upx 0 0;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	margin-top: -100upx;
	background-color: #fff;
	
}
/deep/ .u-item-bg,.u-subsection{
	border-radius: 30upx !important;
}

.tableTh{
	width: 710rpx;
	height: 103rpx;
	background: #F2F5F8;
	box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108,148,182,0.2);
	border: 1rpx solid #A4B8D3;
	border-radius: 20upx 20upx 0 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	position: absolute;
	top: 0;
	.tableData_topTitle{
		width: 100rpx;
		text-align: center;
		display: block;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24upx;
		color: #2654B0;
	}
}
.tableTd{
		padding: 80upx 0 0;
		overflow: hidden;
		.tableTr{
			padding: 10upx;
			display: flex;
			align-items: center;
			border-radius: 8rpx;
		}
		.tableData_bomTitle{
			width: 80upx;
			text-align: center;
			height: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24upx;
			color: #5F6475;
			line-height: 24px;
			display: block;
			font-style: normal;
			text-transform: none;
			padding: 5upx;
		}
	}
.gengduo{
	width: 709upx;
	height: 60upx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F1F6FF;
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24upx;
	color: #2654B0;
	.icon_arrow_down{
		width: 24upx;
		height: 12upx;
		margin-left: 13upx;
	}
}
.odd-row{
	background: #F1F6FF;
}
.popupBox{
	.titleView{
		width: 100%;
		height: 93upx;
		line-height: 93upx;
		background: #1B9CFF;
		font-family: Segoe UI, Segoe UI;
		font-weight: bold;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		
	}
	.boxNr{
		background: #F7F9FC;
		height: 600upx;
		overflow-y: auto;
	}
	.nrTitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: #000000;
		font-style: normal;
		text-transform: none;
		padding: 28upx 30upx;
	
	}
	.subTitleNr{
		width: 573upx;
		height: 178upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 22upx auto;
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 24upx;
		color: #5F6475;
		line-height: 48upx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 25upx 40upx;
	}
}
.tableTdNull{
	width: 100%;
	text-align: center;
	margin: 40rpx auto;
	font-size: 28rpx;
	color: #5F6475;
}
</style>